<template>
  <div class="employee_login">
    <!-- 登陆背景 -->
    <h1>GRACELAND</h1>
    <p>
        This is a scholar's cabin, where anyone who is dedicated to 
        their academic research can find a space, either to publish 
        magnificent papers or to disseminate knowledge, or si   mply 
        to record their growth journey, customize goals and share 
        updates. Let's witness our growth together!
    </p>
    <!-- 登陆盒子 -->
    <div class="login_box">
        <el-row>
          <!-- 员工登录标题 -->
          <el-col :span="20">
            <div class="login_title">员工登录</div>
          </el-col>
          <!-- 跳转管理员登录 -->
          <el-col :span="4">
            <div class="toAdministratorLogin" @click="toAdministratorLogin"></div>
          </el-col>
        </el-row>
        <!-- 登录表单区域 -->
        <el-form 
          ref="loginFormRef" 
          :model="loginForm" 
          :rules="loginFormRules" 
          class="login_form"
          status-icon
        >
          <!-- 用户名 -->
          <el-form-item prop="name">
            <el-input 
              v-model="loginForm.name" 
              prefix-icon="iconfont icon-xingming" 
              placeholder="请输入姓名"
              clearable
            >
            </el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input 
              v-model="loginForm.password" 
              prefix-icon="iconfont icon-mima" 
              show-password 
              placeholder="请输入密码"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <!-- 记住密码 -->
            <el-checkbox v-model="loginForm.isRemPwd">记住密码</el-checkbox>
            <!-- 忘记密码按钮 -->
            <el-button class="forgotPassword" type="text" @click="forgetPassword">忘记密码</el-button>
          </el-form-item>
          <!-- 登录按钮区域 -->
          <button type="button" class="custom-btn btn-3" @click="login"><span>登录</span></button>
        </el-form>
    </div>
  </div>
</template>

<script>

export default {
  name: 'EmployeeLogin',
  data() {
    return {
      //登录表单的数据绑定对象
      loginForm: {
        name: '',
        password: '',
        isRemPwd:false,
      },
      //表单的验证规则对象
      loginFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
        ]
      },
    }
  },
  methods: {
    //跳转管理员登录
    toAdministratorLogin() {
      this.$router.push("/administratorLogin")
    },
    //忘记密码提示
    forgetPassword() {
      const h = this.$createElement;

      this.$notify({
        title: '友情提示',
        message: h('i', { style: 'color: teal'}, '本小网站由作者亲自打造维护，因能力有限，请各位忘记自己账号密码的小伙伴联系邮箱：2316601146@qq.com非常抱歉为各位带来不便!'),
        position: 'top-left',
        type: 'warning',
        duration:10000
      });
    },
    //登录
    login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('settings/employee/login.do',this.loginForm)
        if (res.code == '1') {
          this.$message.success('登录成功')
          window.localStorage.setItem('user',JSON.stringify(res.others))
          window.localStorage.setItem('isRemPwd',this.loginForm.isRemPwd)
          this.$router.push('/purchase')
        } else {
          this.$message.error('登录失败！' + res.message)
        }  
      })
    },
    //实现记住密码功能
    rememberPassword() {
      let isRemPwd = window.localStorage.getItem('isRemPwd')
      if(isRemPwd == 'true') {
          let user = JSON.parse(window.localStorage.getItem('user'))
          this.loginForm.name = user.name
          this.loginForm.password = user.password
          this.loginForm.isRemPwd = true
      }
    }
  },
  created() {
    this.rememberPassword()
  }
}
</script>

<style scoped>
/* 背景部分 */
.employee_login {
  height: 100%;
  background-color: #40BFB7;
}
h1 {
  width: 200px;
  margin: 0;
	font: 80px 'LeagueGothicRegular';
	position: relative;
	top: 235px;
	left: 75px;
	color: rgba(0,0,0,0);
	-webkit-transform: skew(63deg,-26.6deg);
	-moz-transform: skew(63deg,-26.6deg);
	-o-transform: skew(63deg,-26.6deg);
	-ms-transform: skew(63deg,-26.6deg);
	transform: skew(63deg,-26.6deg);
	text-shadow: 0 0 3px rgba(0, 0, 128, 0.25);
	z-index: 50;
}
h1:after {
	content: "GRACELAND";
	position: absolute;
	top: 15px;
	left: 25px;
	color: #CEDA23;

	-webkit-transform: skew(-63deg) scale(1,.5);
	-moz-transform: skew(-63deg) scale(1,.5);
	-o-transform: skew(-63deg) scale(1,.5);
	-ms-transform: skew(-63deg) scale(1,.5);
	transform: skew(-63deg) scale(1,.5);
	text-shadow: -1px -1px 1px #aaa, -2px -2px 1px #999, -3px -3px 1px #888, -4px -4px 1px #777, -5px -5px 1px #666, -6px -6px 1px #555, -7px -7px 5px rgba(0, 0, 128, 0.75);
	z-index: 100;
}
p {
    letter-spacing: 2.5px;
    width: 460px;
    height: 150px;
    position: absolute;
    top: 270px;
    left: 330px;
    font: 14px/24px 'ArchitectsDaughterRegular';
    color: rgba(255,255,255,.35);
    text-align: center;

    -webkit-transform: skew(63deg,-26.6deg);
    -moz-transform: skew(63deg,-26.6deg);
    -o-transform: skew(63deg,-26.6deg);
    -ms-transform: skew(63deg,-26.6deg);
    transform: skew(63deg,-26.6deg);
    position: absolute;
    z-index: 50;
}
/* 员工登录盒子部分 */
.login_box {
  width: 450px;
  height: 430px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 73%;
  top: 50%;
  transform: translate(-26%, -50%);
  box-shadow: 0 0 10px rgb(50, 169, 161);
}
.login_title {
  color: #6ACDA2;
  font-size: 2em;
  font-weight: bolder;
  margin: 25px 0px;
  padding: 0px 25px;
  border-left: #6ACDA2 6px solid;
}
.login_form {
  position: absolute;
  width: 100%;
  padding: 40px 30px;
  box-sizing: border-box;
}
.toAdministratorLogin {
	border: 1px solid #fff;
	position: relative;
  height: 70px;
}
.toAdministratorLogin::before {
  content: "";
  width:0;
  height: 0;
  border:65px solid transparent;
  border-right:65px solid #f2c927;
  transform: rotate(135deg);
  position: absolute;
  right: -67px;
  top: -66px;
  cursor: pointer;
}
.toAdministratorLogin::after {
	content: "管理员";
	width: 55px;
	height: 50px;
	color: #FFF;
	transform: rotate(45deg);
	position: absolute;
	right: 13px;
	top: 16px;
	font-weight: bold;
	letter-spacing:2px;
	cursor: pointer;
}
/* 忘记密码 */
.forgotPassword {
  float: right;
}
/* 登录按钮部分 */
.custom-btn {
  margin-top: 20px;
  width: 170px;
  height: 60px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 800;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
  7px 7px 20px 0px rgba(0,0,0,.1),
  4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
  position: absolute;
  left: 50%;
  font-size: 20px;
  transform: translate(-50%, 0%);
}
.btn-3 {
  background: #6ACDA2;
  background: linear-gradient(0deg, rgba(106,205,162,1) 0%, rgba(108,205,162,1) 100%);
  width: 250px;
  height: 50px;
  line-height: 50px;
  padding: 0;
  border: none;
  
}
.btn-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: #6ACDA2;
  transition: all 0.3s ease;
}
.btn-3:before {
  height: 0%;
  width: 2px;
}
.btn-3:after {
  width: 0%;
  height: 2px;
}
.btn-3:hover{
  background: transparent;
  box-shadow: none;
}
.btn-3:hover:before {
  height: 100%;
}
.btn-3:hover:after {
  width: 100%;
}
.btn-3 span:hover{
color: #6ACDA2;
}
.btn-3 span:before,
.btn-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: #6ACDA2;
  transition: all 0.3s ease;
}
.btn-3 span:before {
  width: 2px;
  height: 0%;
}
.btn-3 span:after {
  width: 0%;
  height: 2px;
}
.btn-3 span:hover:before {
  height: 100%;
}
.btn-3 span:hover:after {
  width: 100%;
}
</style>
